<template>
  <div class="detPage">
    <div class="detPage__line">
      <div class="detPage__line--title">基金总额</div>
      <div class="detPage__line--con">{{form.numTotal}}元</div>
      <div class="detPage__line--title">订单总数</div>
      <div class="detPage__line--con">{{form.orderTotal}}单</div>
    </div>

    <div class="detPage__search">
      <div class="detPage__search--left">
        <div class="nikeName">微信昵称</div>
        <el-input v-model="form.input" style="width:120px" type="text"></el-input>
        <div class="searchBtn" @click="getUserContent">搜索</div>
      </div>
      <el-select @change="selectFun" v-model="form.getTypeValue" placeholder="按基金升序">
        <el-option
          v-for="item in activeTypeList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>

    <div class="detPage__table">
      <div class="detPage__table--title">
        <div class="content" style="width:30%">微信昵称</div>
        <div class="content" style="width:20%">交易总额</div>
        <div class="content" style="width:10%">订单数</div>
        <div class="content" style="width:20%">最近交易时间</div>
        <div class="content" style="width:10%">基金值</div>
      </div>
      <div class="detPage__table--list" v-for="(item, index) in tableData" :key="index">
        <div class="content imgBox">
            <div style="width: 60px; height: 60px">
              <img
                style="width: 60px; height: 60px"
                :src="item.avatarUrl"
                alt
              />
            </div>
            <p style="margin-left: 20px; width: 150px">{{ item.nickName }}</p>
          </div>
        <div class="content" style="width:20%">{{item.totalAmount}}</div>
        <div class="content" style="width:10%">{{item.orderNumber}}</div>
        <div class="content" style="width:20%">{{item.lastPayTime}}</div>
        <div class="content" style="width:10%">{{item.totalFundQuota}}</div>
      </div>
      <div v-if="tableData.length === 0" class="detPage__table--noList">暂无数据</div>
    </div>

    <PageManage
      :pageSize="form.pageSize"
      :pageNum="form.pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";
import {
  getCommodityDet,
  getUserCommodityList,
} from "@/api/commodity/commodity";

@Component({
  components: {
    PageManage,
  },
})
export default class ManageIndex extends Vue {
  name = "detCommodity";

  form = {
    pageSize: 20,
    pageNum: 1,
    input: "",
    getTypeValue: 1,
    numTotal: null,
    orderTotal: null,
  };

  total = 0;

  activeTypeList = [
    {
      id: 1,
      label: "按基金升序",
    },
    {
      id: 2,
      label: "按基金降序",
    },
    {
      id: 3,
      label: "按最近交易时间升序",
    },
    {
      id: 4,
      label: "按最近交易时间降序",
    },
  ];

  tableData = [];

  mounted() {
    this.init();
  }

  /**
   * 初始化信息
   */
  async init() {
    const res = await getCommodityDet({});
    this.form.numTotal = res.data.totalFundQuota;
    this.form.orderTotal = res.data.totalOrderNumber;
    this.getUserContent();
  }

  /**
   * 获取基金列表详情
   */
  async getUserContent() {
    const param = {
      nickName: this.form.input,
      page: this.form.pageNum,
      size: this.form.pageSize,
      sortType: this.form.getTypeValue,
    };

    const res = (await getUserCommodityList(param)) as any;
    this.tableData = res.data ? res.data : [];
    this.total = Number(res.totalCount);
  }

  /**
   * 下拉框筛选
   */
  selectFun(e) {
    this.form.getTypeValue = e;
    this.getUserContent();
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.form.pageSize = val;
    this.getUserContent();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.form.pageNum = val;
    this.getUserContent();
  }
}
</script>

<style lang="scss" scoped>
@include b(detPage) {
  @include e(line) {
    display: flex;
    padding-left: 10px;
    height: 60px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    @include m(title) {
      margin-right: 40px;
      font-size: 14px;
      font-weight: bold;
      color: #586884;
    }

    @include m(con) {
      margin-right: 40px;
    }
  }

  @include e(search) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin-top: 20px;

    @include m(left) {
      display: flex;
      align-items: center;

      .nikeName {
        color: #586884;
        margin-right: 20px;
        margin-left: 10px;
      }

      .searchBtn {
        padding: 8px 15px;
        border-radius: 50px;
        color: white;
        font-size: 14px;
        background-color: #2d99f3;
        margin-left: 40px;
        cursor: pointer;
      }
    }
  }

  @include e(table) {
    margin-top: 10px;
    margin-bottom: 30px;
    @include m(title) {
      height: 60px;
      background-color: #f5f6fa;
      color: #586884;
      display: flex;
      align-items: center;

      .content {
        display: flex;
        justify-content: center;
      }
    }

    @include m(list) {
      display: flex;
      width: 100%;
      height: 80px;
      align-items: center;
      border-bottom: 1px solid #f5f6fa;
      color: #586884;

      .content {
        display: flex;
        justify-content: center;
      }

      .imgBox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;
      }
    }

    @include m(noList) {
      width: 100%;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #dcdfe6;
      color: #dcdfe6;
      display: flex;
      justify-content: center;
    }
  }
}

.setImgBox {
  width: 150px;
  display: flex;
  align-items: center;

  p {
    margin-left: 20px;
  }
}
</style>
